<div role=" table" class="gf-table-main" id="StatesTable">
    <div class="custom-scrollbar"
        style="position: relative; overflow: hidden; width: 100%; height: auto; min-height: 0px; max-height: 100%;box-sizing: inherit;">
        <div class="view"
            style="position: relative; overflow: scroll; margin-right: -8px; margin-bottom: -8px; max-height: calc(100% + 8px);">
            <!-- THEAD -->
            <div class="gf-table-thead gf-unselectable" role="row" ng-mouseup="editor.statesTable.onMouseUp($event)"
                ng-mousemove="editor.statesTable.onMouseMove($event)"
                ng-mouseleave="editor.statesTable.onMouseUp($event)">
                <!-- HEADERS -->
                <!-- EXPAND -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.statesTable.getWidth('expand')}">
                    <div ng-attr-title="{{editor.statesTable.getDesc('expand')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.statesTable.getLabel('expand')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.statesTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- ID -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.statesTable.getWidth('id')}">
                    <div ng-attr-title="{{editor.statesTable.getDesc('id')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.statesTable.getLabel('id')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.statesTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- LABEL -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.statesTable.getWidth('label')}">
                    <div ng-attr-title="{{editor.statesTable.getDesc('label')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.statesTable.getLabel('label')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize"
                        ng-mousedown="editor.statesTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- SHAPE -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.statesTable.getWidth('shape')}">
                    <div ng-attr-title="{{editor.statesTable.getDesc('shape')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.statesTable.getLabel('shape')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize"
                        ng-mousedown="editor.statesTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- LEVEL -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.statesTable.getWidth('level')}">
                    <div ng-attr-title="{{editor.statesTable.getDesc('level')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.statesTable.getLabel('level')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.statesTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- RAW VALUE -->

                <!-- FORMATED VALUE -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.statesTable.getWidth('fval')}">
                    <div ng-attr-title="{{editor.statesTable.getDesc('fval')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.statesTable.getLabel('fval')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.statesTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- COLOR LEVEL -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.statesTable.getWidth('colors')}">
                    <div ng-attr-title="{{editor.statesTable.getDesc('colors')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.statesTable.getLabel('colors')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.statesTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- TAGS -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.statesTable.getWidth('tags')}">
                    <div ng-attr-title="{{editor.statesTable.getDesc('tags')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.statesTable.getLabel('tags')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.statesTable.onMouseDown($event)">
                    </div>
                </div>
            </div>
            <!-- TBODY -->
            <div class="gf-table-body">
                <div role="row" class="gf-table-rows gf-table-rows-resizable"
                    ng-repeat="state in editor.flowchartHandler.getFlowchart().getStateHandler().getStatesForInspect()">
                    <!-- CELLS -->
                    <div class="gf-table-row_line" ng-mouseleave="state.unhighlightCell()"
                        ng-mouseover="state.highlightCell()">
                        <!-- EXPAND -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" id="expand"
                            ng-click="state.reduce=!state.reduce"
                            ng-style="{'width' : editor.statesTable.getWidth(CN1)}">
                            <div class="gf-table-content gf-unselectable" style="text-align: center; cursor: pointer;">
                                <span>
                                    <i class="fa fa-chevron-right" title="Expand/Collapse for detail"
                                        ng-class="{'gf-chevron-init': state.reduce, 'gf-chevron-rotate': state.reduce === false}">
                                    </i>
                                </span>
                            </div>
                        </div>
                        <!-- ID -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" id="expand"
                            ng-style="{'width' : editor.statesTable.getWidth('id')}"
                            ng-mouseleave="state.editButton = false;" ng-mouseover="state.editButton = true;">
                            <div class="gf-table-content">
                                <span>{{state.xcell.getId()}}</span>
                            </div>
                            <!-- <div ng-show="state.editButton === true && state.edited === true && state.edit !== true"
                                style="padding:6px;float:right;" ng-click="editor.undo(state)">
                                <span bs-tooltip="'Undo'">
                                    <i class="fa fa-undo"></i>
                                </span>
                            </div> -->
                            <!-- <div ng-show="state.editButton === true && state.edit !== true"
                                style="padding:6px;float:right;" ng-click="editor.onEdit(state)">
                                <span bs-tooltip="'Edit/Change ID'">
                                    <i class="fa fa-edit"></i>
                                </span>
                            </div> -->
                            <!-- <div ng-show="state.edit">
                                <input type="text" ng-attr-id="{{'state-' + state.xcell.uniqId}}" class="gf-form-input"
                                    ng-model="state.xcell.mxcell.id" ng-model-onblur
                                    placeholder="{{state.xcell.mxcell.id}}" style="width: 100%;"
                                    ng-keydown="$event.keyCode === 13 && editor.onChangeId(state)" />
                            </div> -->
                        </div>
                        <!-- LABEL -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" id="rule"
                            ng-style="{'width' : editor.statesTable.getWidth('label')}">
                            <div class="gf-table-content">
                                {{state.xcell.getDefaultLabel()}}
                            </div>
                        </div>
                        <!-- SHAPE -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" id="rule"
                            ng-style="{'width' : editor.statesTable.getWidth('label')}">
                            <div class="gf-table-content" title="{{state.getShapeStyles()}}">
                                {{state.getShapeName()}}
                            </div>
                        </div>
                        <!-- LEVEL -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" id="level"
                            style="text-align: center;" ng-style="{'width' : editor.statesTable.getWidth('level')}">
                            <div class="gf-table-content">
                                {{state.getTextLevel()}}
                            </div>
                        </div>
                        <!-- HIGTEST RAW VALUE -->

                        <!-- HIGTEST FORMATED VALUE -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" id="fval"
                            ng-attr-title="{{state.highestValue}}"
                            ng-style="{'width' : editor.statesTable.getWidth('fval')}">
                            <div class="gf-table-content">
                                {{state.highestFormattedValue}}
                            </div>
                        </div>
                        <!-- COLOR -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" id="colors"
                            ng-style="{'width' : editor.statesTable.getWidth('colors')}" ng-bind-html="editor.renderStyles(state)">
                        </div>
                        <!-- TAGS -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" id="actions"
                            ng-style="{'width' : editor.statesTable.getWidth('tags')}">
                            <div class="gf-table-content gf-unselectable">
                                <div style="display:inline-block" ng-show="state.shapeState.isChanged()"
                                    bs-tooltip="'Mapping on Color'"><i class="fa fa-paint-brush"></i></div>
                                <div style="display:inline-block" ng-show="state.textState.isChanged()"
                                    bs-tooltip="'Mapping on text'"><i class="fa fa-paragraph"></i></div>
                                <div style="display:inline-block" ng-show="state.linkState.isChanged()"
                                    bs-tooltip="'Mapping on Link'"><i class="fa fa-chain"></i></div>
                                <div style="display:inline-block" ng-show="state.eventState.isChanged()"
                                    bs-tooltip="'Mapping on Animation'"><i class="fa fa-film"></i></div>
                                <div style="display:inline-block" ng-show="state.changed"
                                    bs-tooltip="'Mapped and Changed'"><i class="fa fa-check-circle"></i></div>
                                <div style="display:inline-block" ng-show="state.getStatus('tooltip') === true"
                                    bs-tooltip="'Tooltips available'"><i class="fa fa-info"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="gf-table-row_body" ng-show="state.reduce === false && editor.initPreview(state)">
                        <ng-include src="GFPlugin.getPartialPath() + 'inspect/states/stateBody.html'"> </ng-include>
                    </div>
                </div>
            </div>
            <!-- TFOOTER -->
            <div class="gf-table-tfooter gf-unselectable">
                <div class="gf-table-columnfooter" colspan="1">
                    <div class="gf-form-inline">
                        <div class="gf-form" style="margin-right: 5px;">
                            <!-- <button class="btn btn-danger btn-small" ng-click="editor.reset();"
                                title="Reinit graph and color">
                                <svg width="16" height="16" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 538 125C 538 125 538 450 538 450C 538 471 521 488 500 488C 479 488 462 471 462 450C 462 450 462 125 462 125C 462 104 479 87 499 87C 521 87 538 104 538 125C 538 125 538 125 538 125M 380 188C 385 205 377 223 361 231C 238 294 174 432 204 568C 235 703 353 799 492 803C 630 807 753 717 791 584C 830 451 773 309 654 239C 636 228 629 205 640 187C 651 169 674 163 692 174C 840 262 911 439 864 605C 816 770 662 883 490 878C 317 873 170 752 131 584C 93 416 173 243 326 164C 332 161 337 160 343 160C 361 159 376 171 380 188C 380 188 380 188 380 188"/></svg>
                                &nbsp;Reset
                            </button> -->
                        </div>
                        <div class="gf-form" style="margin-right: 5px;">
                            <!-- <button class="btn btn-primary btn-small" ng-click="editor.apply();"
                                title="Refresh/Apply">
                                <svg width="16" height="16"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" ><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM272 80v80H144V80h128zm122 352H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h42v104c0 13.255 10.745 24 24 24h176c13.255 0 24-10.745 24-24V83.882l78.243 78.243a6 6 0 0 1 1.757 4.243V426a6 6 0 0 1-6 6zM224 232c-48.523 0-88 39.477-88 88s39.477 88 88 88 88-39.477 88-88-39.477-88-88-88zm0 128c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40z"></path></svg>
                                &nbsp;Apply
                            </button> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
